<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="./css/toastr.min.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    
    <script src="./js/jquery-1.10.2.min.js"></script>
    <script src="./js/toastr.min.js"></script>
    <script src="./images/layer/layer.js"></script>
    <!-- <script>
        layer.open({
            type: 0,
            title: false,
            closeBtn: 1, //不显示关闭按钮
            shade: 0,
            area: ['340px', '215px'],
            offset: 'rb', //右下角弹出
            // time: 3000, //2秒后自动关闭
            anim: 2,
            content: '<h1>我是弹出层</h1>', //弹出的信息写在这个页面
            end: function(){ 
            //结束后操作
            }
        });
    </script>-->
    <script>
        toastr.options = {
            "closeButton": true,
            "debug": false, 
            "positionClass": "toast-bottom-right",
            "showDuration": "300",
            "hideDuration": "1000",
            "extendedTimeOut": "0",
            "timeOut": "0",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        }
        
        for(var i=0; i<5; i++){
            (function(index){
                setTimeout(function(){
                    toastr.options.onHidden = function(){
                        console.log(index);
                    }
                    toastr.info("<i>hello</i>"+index, "标题"+index)
                    
                }, index*100)
            })(i)
        }
    </script>
</body> 
</html>